برنامه نویس

جاوا اسکریپت چیست؟ این سوالی است که برای بسیاری از افراد علاقه مند به آموزش برنامه نویسی و طراحی وب پیش می‌آید. همانطور که می‌دانید در دنیای برنامه نویسی همانند دنیای واقعی، با زبان‌های بسیاری روبرو هستیم که هر کدام مزایا و معایب خاص خود را دارند. ما در این مقاله، قصد داریم یکی از محبوب‌ترین زبان‌های این حوزه یعنی جاوا اسکریپت را به شما معرفی کنیم. اگر مایل هستید با آموزش جاوا اسکریپت وارد دنیای برنامه نویسی شوید و می‌خواهید در مورد زبان JavaScript و کاربردها و ویژگی‌های آن بیشتر بدانید، در ادامه این مقاله با سون لرن همراه باشید.

زبان برنامه نویسی جاوا اسکریپت چیست؟
JavaScript که به اختصار JS نیز نامیده می‌شود، یکی از محبوبترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می‌توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. بنابراین می‌توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.

اگر با هر یک از این اصطلاحات آشنایی ندارید نگران نباشید، زیرا در ادامه به توضیح هر یک از آن‌ها خواهیم پرداخت. برای اینکه بهتر متوجه چیستی زبان جاوا اسکریپت شوید، در ابتدا باید جواب سوالاتی مانند زبان کامپایلری چیست و چه تفاوتی با زبان مفسری دارد؟، زبان برنامه نویسی سمت سرور و سمت کاربر به چه نوع زبان‌هایی گفته می‌شود؟ را بدانید. پس از درک این مفاهیم می‌توانید آموزش جاوا اسکریپت را شروع کنید.

همانطور که می‌دانید کامپیوترها تنها به زبان صفر و یک (Binary) صحبت می‌کنند و زبان دیگری را متوجه نمی‌شوند. ما در ابتدا برای برقراری ارتباط با ماشین‌ها سعی کردیم به زبان خود آنها، یعنی زبانی که به زبان صفر و یک نزدیک‌تر است، صحبت کنیم. به این نوع زبان‌ها که به صورت مستقیم با پردازنده در ارتباط‌اند، در اصطلاح، زبان‌های سطح پایین (Low Level) گفته می‌شود. از جمله این زبان‌ها می‌توان به اسمبلی اشاره کرد.

اما یادگیری و تسلط به این زبان‌ها برای برنامه نویسان فوق العاده سخت بود. بنابراین متخصصین تصمیم به ساخت زبان‌هایی گرفتند که به زبان انسان‌ها نزدیک‌تر باشد. در اصطلاح به این زبان‌ها، زبان‌های سطح بالا (High Level) می‌گویند. زبان‎های سطح بالایی مانند JavaScript کار را برای برنامه‎نویسان ساده‌تر کردند، زیرا ساختار نوشتاری و منطق آن‌ها بسیار به زبان انسان‌ها نزدیک‌تر شده است. پس می‌توان اینگونه نتیجه گرفت که آموزش جاوا اسکریپت نسبت به سایر زبان‌های برنامه نویسی سطح پایین ساده‌تر است.

همانطور که دیدید در تعریف زبان برنامه نویسی جاوا اسکریپت به این نکته اشاره شد که این زبان از نوع زبان‌های مفسری است. برای درک ماهیت زبان‌های برنامه نویسی مفسری ابتدا فکر کنید که شما یک مترجم هستید. برای ترجمه یک متن، دو راه بیشتر ندارید. یا باید آنچه را دریافت می‌کنید به صورت خط به خط و همزمان ترجمه کنید، یا کل مطلب را یک جا ترجمه کنید. این دقیقا همان تفاوت میان زبان‌های مفسری (Interpreter) و زبان‌های کامپایلری (Compiled) است.

زبان‌های برنامه نویسی مفسری چه نوع زبان هایی هستند؟
در زبان‌های مفسری (Interpreted) سورس کد به صورت خط به خط تفسیر می‌شود یعنی پس از تفسیر و اجرای خط اول به خط دوم می‌رود که این روند باعث کند شدن پروسه اجرا می‌شود. این زبان‌ها برعکس زبان کامپایلری به سیستم‌عامل وابسته نیستند چرا که به صورت همزمان و از طریق مفسر، اجرا می‌شوند.

به چه زبان هایی، زبان برنامه نویسی کامپایلری می‌گویند؟
اجازه دهید کمی بیشتر و تخصصی‌تر در این باره توضیح دهیم. در زبان‌های کامپایل شده تمام سورس کدها به یکباره کامپایل (ترجمه) شده و به صورت کامل پردازش و اجرا می‌شوند. خروجی ای که کامپایلر در اختیار شما قرار می‌دهد یک فایل کامپایل شده برای سیستم‌عامل مورد نظر شما است که هیچ وابستگی به کدهای نوشته‌شده ندارند. در واقع زبان‌های کامپایلری به سیستم‌عامل وابسته هستند و امکان استفاده از کدهای کامپایل شده بر روی سیستم‌عامل دیگری وجود ندارد.

الگوریتم‌ها دارای پیچیدگی‌های مختلفی هستند و پیاده‌سازی کد مربوط به هرکدام ممکن است کوتاه و یا طولانی و شامل دستورات پیچیده باشد. برای فهم بهتر یک الگوریتم برنامه‌نویسی و نحوه عملکرد آن می‌توان از فلوچارت (FlowChart) استفاده کرد. فلوچارت نمایشی گرافیکی از فرایند یک برنامه است و از مجموعه شکل‌های قراردادی تشکیل شده که به کمک آن‌ها می‌توان دستورات را به ترتیب ترسیم نموده و روند یک الگوریتم را ساده‌سازی کرد. کشیدن فلوچارت مربوط به قبل از شروع برنامه‌نویسی است و وابستگی به نوع زبان برنامه‌نویسی ندارد. فلوچارت‌ها در تعیین روند اجرای دستورات و تعیین ورودی و خروجی برنامه نقش مهمی دارند.

ممکن است فکر کنید کشیدن فلوچارت برای مسائل پیچیده سخت است، اما فراموش نکنید که فلوچارت در پیاده‌سازی منطق کلی به شما کمک کرده و می‌تواند مسائل طولانی را در ساده‌ترین حالت توضیح دهد. کشیدن فلوچارت برای کسانی که تازه به دنیای برنامه‌نویسی وارد شده‌اند اهمیت بیشتری دارد زیرا یکی از پیش‌نیازهای یادگیری برنامه‌نویسی است.

برای رسم فلوچارت در اینجا تعدادی ابزار آنلاین به شما معرفی می کنیم تا به کمک آنها بتوانید بدون نصب نرم افزار بر روی سیستم خود به راحتی فلوچارت مورد نظر خود را رسم نمایید

سایت draw.io
این سایت امکان طراحی نمودارهای مختلف را به شما خواهد داد. برای رسم فلوچارت کافی است گزینه مربوط به آن را انتخاب کنید تا قالب آماده برای شما نمایش داده شود. پس از کشیدن فلوچارت می‌توانید آن را با فرمت‌های PDF، JPEG، SVG و غیره ذخیره (Export) کنید.

سایت gliffy
این سایت نیز امکان طراحی نمودارهای مختلفی از جمله فلوچارت را برای شما فراهم می‌کند و امکان تعیین اندازه نمودار خروجی را نیز به شما خواهد داد. همچنین امکان Export و انتخاب محل ذخیره را به شما خواهد داد.

سایت creately
این سایت یکی از محبوب‌ترین ابزاهای آنلاین برای طراحی نمودارهای مختلف است. همچنین UI زیبایی دارد و رنگی تازه به طراحی شما می‌بخشد. انتخاب استایل و پالت رنگی از دیگر امکاناتی است که کریتلی به شما می‌دهد.

وقتی اسم طراحی وب سایت میاد، اولین صحبتی که میاد تو ذهن فرد عادی اینه HTML – CSS باید بلد باشی… خب این CSS که میگیم یعنی چی؟ چه کاری می‌تونیم باهاش انجام بدیم؟ به کمک CSS، چه کار‌هایی می‌تونیم در HTML انجام بدیم؟ در این مقاله در رابطه با این موضوعات صحبت می‌کنیم…

سرفصل‌های پست

1 معنی CSS
2 چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟
2.1 CSS چیست؟
3 چرا باید از کدهای CSS استفاده کنیم؟
4 ساختار نحوی کدهای CSS
5 id و Class در CSS
5.1 اعمال دستورات فقط بر روی یک عنصر واحد توسط id
5.2 اعمال دستورات بر روی یک گروه از عناصر توسط Class
6 کدهای CSS را کجا بنویسیم؟
6.1 Exteal style sheet یا اتصال خارجی
6.2 Inteal Style Sheet یا اتصال داخلی
6.3 inline style یا اتصال درون خطی
6.4 اولویت تاثیرگذاری روش های اتصال کد CSS
معنی CSS
همونطور که در مقدمه خوندیم، کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی ‌صفحات استایل آبشاری هست. حالا چرا آبشاری؟ چون دستورات CSS اعمال شده به هرعنصر، بر فرزندان اون عنصر هم تاثیر دارن. این مسئله رو تو مقاله‌های آینده، بیشتر متوجه می‌شیم!

چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟
می‌شه گفت که تنها پیش‌نیاز برای یادگیری مفاهیم CSS، تسلط مناسبی به HTML هست. مباحث زیر در بدو شروع، مهم‌ترین مباحث مورد نیاز شما برای یادگیری CSS هستن:

تسلط به مبحث فرزند – پدر (parent-child)
تسلط به مفهوم عنصر و صفت (element, attribute)
بنابراین قبل از آموزش CSS شما باید آموزش HTML رو دیده باشین. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می‌تونین به اون مسلط بشین. HTML زبانی هست که تمامی عناصر موجود در صفحات وب مثل جعبه های متن، دکمه ها و غیره توسط اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر صفحه شکل می‌گیره.

یک صفحه وب از اجزای زیر تشکیل شده:

Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.
Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.
Behavior (رفتار) این بخش وب به وسیله  JavaScript ایجاد می‌شه. آموزش JavaScript
CSS چیست؟
کدهای CSS دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وب‌سایت رو تعیین کنیم. بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می‌کنین و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید!

برای مثال، اگه یک طوطی رو، به عنوان صفحه وب‌سایت در نظر بگیریم، کدهای HTML و CSS اون به فرم زیر تعریف می‌شن!

CSS چیست
یا مثلا به متن ساده زیر توجه کنین:

متن سمت چپ، با کمک کدهای CSS نوشته شده. اما در متن سمت راست، کدهای HTML بدون کد CSS رو مشاهده می‌کنیم.

چرا باید از کدهای CSS استفاده کنیم؟
کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.

خوبه که بدونین گوگل در رتبه بندی وب‌سایت‌ها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.

نکته: در گذشته طراحی سایت و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جداول مشکلات زیادی داشتن و به این خاطر با ظهور CSS کاملا منسوخ شدن. از جمله مشکلات جداول می‌توان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب‌سایت‌هایی است که با جدول پیاده سازی می‌شدن.

در مقابل در وب‌سایتی که با کدهای CSS پیاده‌سازی بشه، عناصر یکی بعد از دیگری در هنگام بارگزاری بر روی صفحه پدیدار می‌شن و کاربر از لحظه درخواست می‌تونه مشغول مطالعه و مشاهده وب‌سایت تا زمانی که بارگزاری کامل بشه، باشه.

همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.

ساختار نحوی کدهای CSS
تو این بخش ساختار کدهای CSS رو یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چرا که بخش‌های بعدی به طور مفصل انواع استایل های عناصر رو آموزش خواهیم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت کنید.

کدهای CSS استایل
ساختار نحوی کدهای CSS
 

Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.

Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.

برای مطالعه تکمیلی و مثال های بیشتر در مورد ساختار نحوی کد های CSS، می‌تونین مقاله ساختمان کد در CSS رو مطالعه کنین.

id و Class در CSS
همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.

حالا اگه بخوایم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال بشه باید از id و Class استفاده کنیم.

اعمال دستورات فقط بر روی یک عنصر واحد توسط id
برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:

<p id="para1">This is a Paragraph.<p>
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:

#para1 {
     text-align:center;
     color:red;
}
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کرد‌یم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.

مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:

<p class="center">This is a Paragraph.</p>
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.”  یا همان نقطه می‌نویسیم:

.center {
text-align:center;
}
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.

در مورد کلاس ها و آیدی ها، مطالب تکمیلی رو تو مقاله کلاس ها و آیدی ها مطالعه کنین.

کدهای CSS را کجا بنویسیم؟
این کد ها رو می‌تونیم داخل هر ویرایشگر کدی بنویسیم، که پیشنهاد ما به شما برای شروع، ویرایشگر هایی مثل brackets، sublime text و notepad هستن.

برای نوشتن کدهای CSS و اتصال اون ها به HTML، سه روش وجود داره:

Exteal Style Sheet : اتصال خارجی
Inteal Style Sheet : اتصال داخلی
Inline Style : اتصال درون خطی
Exteal style sheet یا اتصال خارجی
استایل های خارجی فایل هایی با فرمت css هستن که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک وب سایت که از صفحات زیادی درست شده هستن.
کد های موجود در اون فایل ها، شکلی شبیه به زیر رو دارن:

hr {
   color: sienna;
}
p {
   margin-left:20px;
}
body {
   background-image:url("images/back40.gif");
}
درمورد این روش، تو مقاله روش اتصال خارجی کامل تر یاد می‌گیریم.

Inteal Style Sheet یا اتصال داخلی
نحوه نوشتن این استایل ها مثل استایل خارجی هست ولی تنها فرق اون اینه که به جای تگ <link> از تگ <style> استفاده می کنیم.
کد زیر یک نمونه از استایل خارجی هست.
<head>
  <style type="text/css">
    hr {
      color: sienna;
        }
    p {
       margin-left:20px;
       }
    body {
       background-image:url("images/back40.gif");
       }

  </style>
</head>
درمورد این روش، تو مقاله روش اتصال داخلی می‌تونیم کامل تر یاد بگیریم.

inline style یا اتصال درون خطی
با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که دستورات CSS بخاطر اون‌ها به وجود اومده رو از دست میدین. چرا که برای هر عنصر باید دستورات مختص اون رو بنویسین و واضحه که برای تغییر باید به تک تک عناصر مراجعه کرده و اون‌ها رو تغییر بدین که بسیار زمانبر و گاهی همراه با خطا خواهد بود.

برای استفاده از این روش باید به عنصر مورد نظر صفت style را افزوده و بعد خاصیت ها و مقدار ها رو به این صفت اضافه کنین. تو مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده می‌کنیم:

<p style="color:yellow;">This is a paragraph.</p>
درمورد این روش، تو مقاله اتصال درون خطی مفصل تر می‌خونیم.

اولویت تاثیرگذاری روش های اتصال کد CSS
به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:

استایل های درون خطی
شیوه نامه های داخلی
شیوه نامه های خارجی
پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه، باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.

نکته: چنانچه لینک اتصال یک فایل CSS خارجی بعد از دستورات CSS اتصال داخی در تگ head قرار داده بشن، در نهایت دستورات فایل CSS خارجی اعمال خواهند شد.